<template>
	<view class="PKList">
		<!-- tab 选项 -->
		<view class="tabBox">
			<u-tabs :list="navList" :current="tabCurrent" item-width="50%" active-color="#000000" inactive-color="#7F8084" @change="tabChange"></u-tabs>
		</view>
		
		<view class="listBox">
			<view class="list" v-if="tabCurrent == 0" v-for="(item,index) in list" :key="index" @tap.stop="goPK(item)">
				<view class="time">{{item.create_time}}</view>
				<view class="textBox flex-r-b-c">
					<view class="text">{{item.describe}}</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		
		<view class="resultBox" v-if="tabCurrent == 1" v-for="(item,index) in list" :key="index">
			<image v-if="item.status != 3" :src="image+'assets/web_img/编组 2.png'" mode=""></image>
			<image v-if="item.status == 3" :src="image+'assets/web_img/equl.png'" mode=""></image>
			<!-- 时间 -->
			<view class="time">{{item.end_time}}</view>
			<!-- 胜 -->
			<view class="winBox" v-if="item.status != 3">
				<image v-if="item.status == 1" :src="image + item.inviter_info.avatar" mode=""></image>
				<image v-if="item.status == 2" :src="image + item.invitee_info.avatar" mode=""></image>
				<view class="name">{{item.status == 1?item.inviter_info.nickname:item.invitee_info.nickname}}</view>
			</view>
			<!-- 负 -->
			<view class="negative"  v-if="item.status != 3">
				<image v-if="item.status == 1" :src="image + item.invitee_info.avatar" mode=""></image>
				<image v-if="item.status == 2" :src="image + item.inviter_info.avatar" mode=""></image>
				<view class="name">{{item.status == 1?item.invitee_info.nickname:item.inviter_info.nickname}}</view>
			</view>
			<!-- 平 -->
			<view class="winBox"  v-if="item.status == 3">
				<image :src="image + item.invitee_info.avatar" mode=""></image>
				<view class="name">{{item.invitee_info.nickname}}</view>
			</view>
			<view class="negative"  v-if="item.status == 3">
				<image :src="image + item.inviter_info.avatar" mode=""></image>
				<view class="name">{{item.inviter_info.nickname}}</view>
			</view>
		</view>
		
		<!-- 提示栏 -->
		<view style="width: 100%; text-align: center; font-size: 28rpx; margin-top: 30rpx;">{{isText}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				image: this.$base.smallimgUrl,
				tabCurrent: 0,
				navList: [{
					name: '已发起',
					index: 0
				},{
					name: 'PK结果',
					index: 1
				}],
				page: 1,
				list: [],
				isText: ''
			};
		},
		onLoad() {
			this.getPKList() 
		},
		methods: {
			// 获取PK列表
			getPKList(){
				let that = this
				that.$api.pkRecordList({
					page: that.page,
					type: that.tabCurrent
				}).then(res => {
					// console.log(res,'pk结果')
					res.data.data.list.length == 0 ? that.isText = '暂无数据' : that.isText = ''
					that.list = that.list.concat(res.data.data.list)
				})
			},
			// tab 切换
			tabChange(e){
				this.tabCurrent = e
				this.page = 1
				this.list = []
				this.getPKList()
			},
			// pk
			goPK(el){
				console.log(el)
				uni.navigateTo({
					url: '/pages/pk/pk?active_id=' + el.id
				})
			}
		},
		onReachBottom() {
			let that = this
			if(that.isText == ''){
				that.page = that.page + 1
				that.getPKList()
			}
		}
	}
</script>

<style lang="less">
	.PKList{
		width: 100vw;
		.tabBox{
			width: 100%;
		}
		.listBox{
			width: 90%;
			margin: 40rpx auto;
			.list{
				width: 100%;
				padding: 40rpx 0rpx;
				border-bottom: 1px solid #EFEFEF;
				.time{
					font-size: 28rpx;
					font-weight: 400;
					color: #474747;
				}
				.textBox{
					width: 100%;
					margin-top: 20rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #000000;
				}
			}
		}
		
		.resultBox{
			width: 90%;
			height: 226rpx;
			margin: 30rpx auto;
			position: relative;
			image{
				width: 100%;
				height: 100%;
			}
			.time{
				font-size: 28rpx;
				font-weight: 500;
				color: #fff;
				position: absolute;
				top: 10rpx;
				left: 50%;
				transform: translateX(-50%);
			}
			.winBox{
				width: 300rpx;
				text-align: center;
				position: absolute;
				top: 50%;
				left: -50rpx;
				transform: translateY(-50%);
				overflow:hidden;
				text-overflow:ellipsis; 
				white-space:nowrap;
				image{
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
				.name{
					font-size: 24rpx;
					font-weight: 400;
					margin-top: 20rpx;
					// width: 200rpx;
					text-align: center;
					
				}
			}
			.negative{
				width: 300rpx;
				text-align: center;
				position: absolute;
				top: 50%;
				right:-50rpx;
				transform: translateY(-50%);
				image{
					width: 120rpx;
					height: 120rpx;
					border-radius: 50%;
				}
				.name{
					font-size: 24rpx;
					font-weight: 400;
					margin-top: 20rpx;
					// width: 200rpx;
					text-align: center;
					overflow:hidden;
					text-overflow:ellipsis; 
					white-space:nowrap;
				}
			}
		}
		
		
		
	}
</style>
